React Streaming: การเรนเดอร์ฝั่งเซิร์ฟเวอร์แบบ Progressive เพื่อเพิ่มประสิทธิภาพประสบการณ์ผู้ใช้

ในโลกของการพัฒนาเว็บ การมอบประสบการณ์ผู้ใช้ที่รวดเร็วและตอบสนองได้ดีเป็นสิ่งสำคัญอย่างยิ่ง ผู้ใช้คาดหวังว่าเว็บไซต์จะโหลดอย่างรวดเร็วและสามารถโต้ตอบได้โดยไม่ล่าช้า React ซึ่งเป็นไลบรารี JavaScript ยอดนิยมสำหรับสร้างส่วนติดต่อผู้ใช้ นำเสนอเทคนิคอันทรงพลังที่เรียกว่า Streaming Server-Side Rendering (SSR) เพื่อรับมือกับความท้าทายนี้ บทความนี้จะเจาะลึกแนวคิดของ React Streaming SSR สำรวจประโยชน์ การนำไปใช้ และผลกระทบต่อประสิทธิภาพของเว็บไซต์และประสบการณ์ของผู้ใช้

Server-Side Rendering (SSR) คืออะไร?

การเรนเดอร์ฝั่งไคลเอ็นต์แบบดั้งเดิม (CSR) เกี่ยวข้องกับการที่เบราว์เซอร์ดาวน์โหลดไฟล์ HTML, JavaScript และ CSS จากนั้นจึงเรนเดอร์เนื้อหาฝั่งไคลเอ็นต์ แม้จะมีความยืดหยุ่น แต่แนวทางนี้อาจทำให้การเรนเดอร์ครั้งแรกเกิดความล่าช้า เนื่องจากผู้ใช้ต้องรอให้ทรัพยากรทั้งหมดดาวน์โหลดและ JavaScript ทำงานก่อนจึงจะเห็นเนื้อหาใดๆ ในทางกลับกัน SSR จะเรนเดอร์คอมโพเนนต์ React บนเซิร์ฟเวอร์และส่ง HTML ที่เรนเดอร์เสร็จสมบูรณ์ไปยังไคลเอ็นต์ ซึ่งส่งผลให้เวลาในการโหลดครั้งแรกเร็วขึ้น เนื่องจากเบราว์เซอร์ได้รับ HTML ที่สร้างขึ้นอย่างสมบูรณ์ซึ่งสามารถแสดงผลได้ทันที

ข้อจำกัดของ SSR แบบดั้งเดิม

แม้ว่า SSR แบบดั้งเดิมจะมีการปรับปรุงที่สำคัญกว่า CSR แต่ก็มีข้อจำกัดในตัวเอง ใน SSR แบบดั้งเดิม แอปพลิเคชันทั้งหมดจะต้องถูกเรนเดอร์บนเซิร์ฟเวอร์ก่อนที่ HTML ใดๆ จะถูกส่งไปยังไคลเอ็นต์ ซึ่งอาจกลายเป็นคอขวด โดยเฉพาะสำหรับแอปพลิเคชันที่ซับซ้อนซึ่งมีคอมโพเนนต์และการพึ่งพาข้อมูลหลายอย่าง เวลาจนถึงไบต์แรก (Time to First Byte - TTFB) อาจสูง ทำให้ผู้ใช้รับรู้ถึงความช้า

ขอแนะนำ React Streaming SSR: แนวทางแบบ Progressive

React Streaming SSR เอาชนะข้อจำกัดของ SSR แบบดั้งเดิมโดยใช้แนวทางแบบ progressive แทนที่จะรอให้แอปพลิเคชันทั้งหมดเรนเดอร์บนเซิร์ฟเวอร์ Streaming SSR จะแบ่งกระบวนการเรนเดอร์ออกเป็นส่วนเล็กๆ (chunks) และสตรีมส่วนเหล่านี้ไปยังไคลเอ็นต์ทันทีที่พร้อมใช้งาน ซึ่งช่วยให้เบราว์เซอร์เริ่มแสดงเนื้อหาได้เร็วขึ้นมาก ปรับปรุงประสิทธิภาพที่ผู้ใช้รับรู้ได้ และลด TTFB ลองนึกภาพเหมือนร้านอาหารที่เตรียมอาหารของคุณเป็นขั้นตอน: อาหารเรียกน้ำย่อยจะถูกเสิร์ฟก่อน ตามด้วยอาหารจานหลัก และสุดท้ายคือของหวาน แทนที่จะต้องรอจนกว่าอาหารทั้งหมดจะพร้อมในคราวเดียว

ประโยชน์ของ React Streaming SSR

React Streaming SSR มอบประโยชน์มากมายสำหรับประสิทธิภาพของเว็บไซต์และประสบการณ์ผู้ใช้:

• เวลาโหลดเริ่มต้นที่เร็วขึ้น: ด้วยการสตรีม HTML chunks ไปยังไคลเอ็นต์ เบราว์เซอร์สามารถเริ่มแสดงเนื้อหาได้เร็วขึ้นมาก ส่งผลให้เวลาในการโหลดที่รับรู้ได้เร็วขึ้นและการมีส่วนร่วมของผู้ใช้ดีขึ้น
• ปรับปรุง Time to First Byte (TTFB): Streaming SSR ลด TTFB โดยการส่ง HTML chunk แรกทันทีที่พร้อม แทนที่จะต้องรอให้แอปพลิเคชันทั้งหมดเรนเดอร์เสร็จ
• ประสบการณ์ผู้ใช้ที่ดีขึ้น: เวลาโหลดเริ่มต้นที่เร็วขึ้นนำไปสู่ประสบการณ์ผู้ใช้ที่ดีขึ้น เนื่องจากผู้ใช้ไม่ต้องรอนานเพื่อให้เนื้อหาปรากฏ
• SEO ที่ดีขึ้น: เครื่องมือค้นหาสามารถรวบรวมข้อมูลและจัดทำดัชนีเนื้อหาได้อย่างมีประสิทธิภาพมากขึ้น เนื่องจาก HTML พร้อมใช้งานบนเซิร์ฟเวอร์
• Progressive Hydration: Streaming SSR เปิดใช้งาน progressive hydration ซึ่งโค้ด React ฝั่งไคลเอ็นต์จะค่อยๆ แนบ event listeners และทำให้แอปพลิเคชันสามารถโต้ตอบได้ในขณะที่ HTML chunks ถูกสตรีมเข้ามา
• การใช้ทรัพยากรที่ดีขึ้น: ด้วยการแบ่งกระบวนการเรนเดอร์ออกเป็นส่วนเล็กๆ Streaming SSR สามารถปรับปรุงการใช้ทรัพยากรบนเซิร์ฟเวอร์ได้

React Streaming SSR ทำงานอย่างไร

React Streaming SSR ใช้ประโยชน์จาก API ReactDOMServer.renderToPipeableStream() เพื่อสตรีม HTML chunks ไปยังไคลเอ็นต์ API นี้จะคืนค่า readable stream ที่สามารถส่งต่อไปยัง response object ของเซิร์ฟเวอร์ได้ นี่คือภาพประกอบแบบง่ายว่ามันทำงานอย่างไร:

1. เซิร์ฟเวอร์ได้รับคำขอสำหรับหน้าเว็บ
2. เซิร์ฟเวอร์เรียกใช้ ReactDOMServer.renderToPipeableStream() เพื่อเรนเดอร์แอปพลิเคชัน React ลงในสตรีม
3. สตรีมเริ่มปล่อย HTML chunks ออกมาในขณะที่คอมโพเนนต์ React กำลังถูกเรนเดอร์
4. เซิร์ฟเวอร์ส่งต่อ (pipe) สตรีมไปยัง response object เพื่อส่ง HTML chunks ไปยังไคลเอ็นต์
5. เบราว์เซอร์ได้รับ HTML chunks และเริ่มแสดงผลแบบ progressive
6. เมื่อได้รับ HTML chunks ทั้งหมดแล้ว เบราว์เซอร์จะทำการ hydrate แอปพลิเคชัน React ทำให้สามารถโต้ตอบได้

การนำ React Streaming SSR ไปใช้งาน

ในการนำ React Streaming SSR ไปใช้งาน คุณจะต้องมีเซิร์ฟเวอร์ Node.js และแอปพลิเคชัน React นี่คือคำแนะนำทีละขั้นตอน:

1. ตั้งค่าเซิร์ฟเวอร์ Node.js: สร้างเซิร์ฟเวอร์ Node.js โดยใช้เฟรมเวิร์กเช่น Express หรือ Koa
2. ติดตั้ง React และ ReactDOMServer: ติดตั้งแพ็คเกจ react และ react-dom
3. สร้างแอปพลิเคชัน React: สร้างแอปพลิเคชัน React พร้อมกับคอมโพเนนต์ที่คุณต้องการเรนเดอร์บนเซิร์ฟเวอร์
4. ใช้ ReactDOMServer.renderToPipeableStream(): ในโค้ดฝั่งเซิร์ฟเวอร์ของคุณ ให้ใช้ ReactDOMServer.renderToPipeableStream() API เพื่อเรนเดอร์แอปพลิเคชัน React ของคุณลงในสตรีม
5. ส่งต่อสตรีมไปยัง response object: ส่งต่อสตรีมไปยัง response object ของเซิร์ฟเวอร์เพื่อส่ง HTML chunks ไปยังไคลเอ็นต์
6. จัดการข้อผิดพลาด: ใช้การจัดการข้อผิดพลาดเพื่อดักจับข้อผิดพลาดที่อาจเกิดขึ้นระหว่างกระบวนการเรนเดอร์
7. เพิ่มแท็ก script สำหรับ hydration: รวมแท็ก script ใน HTML เพื่อทำการ hydrate แอปพลิเคชัน React ฝั่งไคลเอ็นต์

ตัวอย่างโค้ด (ฝั่งเซิร์ฟเวอร์):

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // Your React component

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // Client-side entry point
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
Sorry, something went wrong
');
    }
  });

  setTimeout(abort, 10000); // Optional: Timeout to prevent indefinite hanging
});

app.use(express.static('public')); // Serve static assets

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

ตัวอย่างโค้ด (ฝั่งไคลเอ็นต์ - `client.js`):

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.hydrateRoot(document,
    
);

ตัวอย่างคอมโพเนนต์ React App (App.js):

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Data loaded successfully!");
    }, 2000);
  });
}

function SlowComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(result => setData(result));
  }, []);

  if (!data) {
    throw new Promise(resolve => setTimeout(resolve, 2000)); // Simulate a loading delay
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
Welcome to Streaming SSR!
      
This is a demonstration of React Streaming SSR.
      Loading...
}>